<template>
  <view>
    <view class="helmet">
      <view class="sercah_mater">
        <view class="sercah_ipt">
          <view class="sercah_ipt-l">
            <u-icon color="#999999" size="28" name="search" style="margin-right: 16rpx"></u-icon>
            <u-input width="100%" height="40rpx" v-model="searchVal" type="text" @input="searchFn" input-align="left"
                     placeholder-style="fontSize:28rpx;color: #999999;" placeholder="请输表号" />
          </view>
          <view class="scan" @click="scanCode()">
            <u-icon name="scan" color="#44D94B" size="36"></u-icon>
          </view>
        </view>
      </view>

    </view>
    <view class="bslist-c-box" >
      <view class="bslist-c">
        <mescroll-body class="water_scroll" ref="mescrollRef" @init="mescrollInit" :down="downOption"
                       @down="downCallback" @up="upCallback">
          <view class="bslist-col xb-card" v-for="(item, index) in dataList" :key="index">
            <view class="bslist-col-t">
              <view class="plate">
                <text style="margin-right: 20rpx;">{{ item.meterNum }}</text>
                <!--<text  class="fontB">车主 </text>-->
                <!--<text  class="fontR">plate</text>-->
              </view>
              <view class="">
                <text>{{ item.installPosition }}</text>
              </view>
            </view>
            <!--<view class="bslist-col-c" >-->
            <!--  <text>1922至 1987</text>-->
            <!--  <text>免费车</text>-->
            <!--  <text >65</text>-->
            <!--</view>-->
            <view class="bslist-col-b" >
              <text>抄录时间</text>
              <text>{{ item.createTime }}</text>
            </view>
            <view class="bslist-col-b fontB">
              <text>当前读数: {{ item.currentValue }}</text>
              <text>上期读数:{{item.lastValue}}</text>
              <text style="color: #F16757;">差值:{{item.currentValue-item.lastValue}} </text>
            </view>
            <view class="bslist-col-b">
              <text class="fontC">{{ item.enterpriseName }}</text>
              <text></text>
            </view>
          </view>
        </mescroll-body>
      </view>
    </view>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      dataList: [],
      meterType:'水表',
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
      // 输入框
      searchVal: '',
    };
  },
  onLoad(op) {
    this.meterType=op.type==0?'水表':'电表'
  },
  methods: {
    searchFn(e) {
      this.dataList = [];
      this.searchVal = e;
      console.log("this.searchVal",this.searchVal)
      clearTimeout(this.searchTimout);
      this.searchTimout = setTimeout(() => {
        this.mescroll.resetUpScroll();
      }, 1000);
    },
    scanCode() {
      uni.scanCode({
        success: (res) => {
          this.searchVal= res.result
          this.dataList = [];
          this.mescroll.resetUpScroll();
        }
      });
    },
    itemClick(item) {
      this.$store.commit("repair/setRepairInfo", item);
      this.navTo("/pages/repair/infor/infor");
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.dataList = [];
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      this.apis.energyApi.nyCheckMeterList({
        pageNum: page.num,
        pageSize: page.size,
        meterType:this.meterType,
        meterNum:this.searchVal
      }).then(res=>{
        this.dataList=this.dataList.concat(res.rows)
        this.mescroll.endBySize(res.rows.length, res.total);
      })
    },
  },
};
</script>

<style lang="scss" scoped="">
.money {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  border-radius: 12rpx;

  view:nth-child(1) {
    margin-right: 20rpx;
  }

  view:nth-child(2) {
    margin-right: 20rpx;
  }

  view {
    display: flex;
    flex-direction: column;
    padding: 30rpx 0 30rpx 34rpx;
    width: 33%;
    background: #FFFFFF;
    border-radius: 12rpx;

    text:first-child {
      font-size: 26rpx;
      color: #666666;
      line-height: 36rpx;
      margin-bottom: 8rpx;
    }

    text:last-child {
      font-size: 44rpx;
      font-weight: 500;
      color: red;
    }
  }
}

page {
  padding: 0;
}

.helmet {
  position: fixed;
  width: 100%;
  z-index: 9;
  top: 0;

  /* #ifdef H5 */
  top: 88rpx;

  /* #endif */
  .sercah_mater {
    background: #ffffff;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .sercah_ipt {
      width: 100%;
      background: #f5f5f5;
      display: flex;
      justify-content: space-between;
      border-radius: 12rpx;
      padding: 16rpx 20rpx;

      .sercah_ipt-l{
        flex: 1;
        display: flex;
       /deep/ u-input,input{
          width: 100%;
         padding-right: 20rpx;
        }
      /deep/ input{
        width: 100%;
        padding-right: 20rpx;
      }
      }

      .scan{
        display: flex;
      }
    }

    /deep/ .u-input {
      width: 100%;
    }

    text {
      display: block;
      width: 56rpx;
      font-size: 28rpx;
      color: #666666;
    }
  }

  .water_t {
    z-index: 2;
    padding: 22rpx 40rpx;
    background: #ffffff;
    display: flex;

    .water_col {
      box-sizing: border-box;
      min-width: 152rpx;
      margin-left: 20rpx;
      height: 46rpx;
      background: #f2f2f2;
      border-radius: 24rpx;
      font-size: 24rpx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #333333;
      @include flexCenter;

      &:first-child {
        margin-left: 0;
      }
    }

    .water_t_ac {
      background: rgba(68, 217, 75, 0.1);
      border: 1rpx solid #44d94b;
      color: #44d94b;
    }
  }



}

.bslist-c-box {
  margin-top: 110rpx;
  padding: 20rpx;

  .bslist-c {
    .bslist-col {
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.06);
      margin-bottom: 20rpx;
      padding: 26rpx 32rpx;

      view {
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        color: #333333;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 36rpx;
        margin-bottom: 20rpx;
      }

      .fontR {
        color: #44D94B;
        font-weight: bold;
      }

      .fontB {
        font-weight: bold;
      }

      .fontC {
        color: #999999;
      }

      .bslist-col-t {
        border-bottom: 1rpx solid #eee;

        view:nth-child(1) {
          padding-bottom: 0rpx;
          font-size: 28rpx !important;
          display: flex;
          align-items: center;
        }

        view:nth-child(2) {
          padding-bottom: 0rpx;
          display: flex;
          align-items: center;
          font-size: 28rpx !important;
        }

        .plate {
          text:nth-child(1) {
            display: inline-block;
            background: #399CF9;
            padding: 6rpx 12rpx;
            color: #FFFFFF;
            border-radius: 12rpx;
          }
        }
      }

      .bslist-col-c {}
    }
  }
}
</style>
